import { CodeSurfer } from "code-surfer";
import {
  dracula,
  duotoneDark,
  duotoneLight,
  github,
  nightOwl,
  oceanicNext,
  shadesOfPurple,
  ultramin,
  vsDark
} from "@code-surfer/themes";

import customTheme from "./custom-theme";

## Code Surfer

# Themes

---

<CodeSurfer>

```js 5:7 title="Default Theme" file="./code.js"
```

</CodeSurfer>

---

<CodeSurfer theme={ultramin}>

```js 5:7 title="Ultramin" file="./code.js"
```

</CodeSurfer>

---

<CodeSurfer theme={duotoneLight}>

```js 5:7 title="Duotone Light" file="./code.js"
```

</CodeSurfer>

---

<CodeSurfer theme={github}>

```js 5:7 title="GitHub" file="./code.js"
```

</CodeSurfer>

---

<CodeSurfer theme={nightOwl}>

```js 5:7 title="Night Owl" file="./code.js"
```

</CodeSurfer>

---

<CodeSurfer theme={shadesOfPurple}>

```js 5:7 title="Shades of Purple" file="./code.js"
```

</CodeSurfer>

---

<CodeSurfer theme={duotoneDark}>

```js 5:7 title="Duotone Dark" file="./code.js"
```

</CodeSurfer>

---

<CodeSurfer theme={dracula}>

```js 5:7 title="Dracula" file="./code.js"
```

</CodeSurfer>

---

<CodeSurfer theme={oceanicNext}>

```js 5:7 title="Oceanic Next" file="./code.js"
```

</CodeSurfer>

---

<CodeSurfer theme={vsDark}>

```js 5:7 title="VS Dark" file="./code.js"
```

</CodeSurfer>

---

<CodeSurfer theme={customTheme}>

```js 5:7 title="Custom Theme" file="./code.js"
```

</CodeSurfer>
